/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-07-17 17:43:16
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-11-04 11:04:26
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\router\backup.tsx
 * @Description: 
 */
import React, { lazy, Suspense } from "react"
import { BrowserRouter, Routes, Route, redirect } from "react-router-dom"
// import { Navigate } from "react-router-dom"

const Home = lazy(() => import('@/views/home/index'))
const Graphics = lazy(() => import('@/views/chart/index'))
const Actor = lazy(() => import('@/views/actor/canvasTable'))
const Graph = lazy(() => import('@/views/graph/index'))
const Calendar = lazy(() => import('@/views/calendar/index'))
const Notfound = lazy(() => import('@/views/404'))


const LazyComponent = (Component: JSX.Element) => {
    return (
        <Suspense fallback={<div>loading...</div>}>
            {Component}
        </Suspense>
    )
}

// 路由表的另外一种写法
// const routes = [
//     {
//         path: '/', element: <Home />, children: [
//             { path: '', element: <Graphics /> },
//             { path: '/graph', element: LazyComponent(<Graph />) },
//             { path: '/calendar', element: LazyComponent(<Calendar />) },
//             { path: '/Notfound', element: <Notfound /> },
//             { path: '*', element: <Navigate to="/Notfound" /> }
//         ]
//     },

//     { path: '/actor', element: LazyComponent(<Actor />) },

// ]

// export default routes
const router = () => (
    <BrowserRouter>
        {/* <Suspense fallback={<div>loading...</div>}> */}
        <Routes>
            <Route path='/' element={<Home />}>
                {/* <Route path='' element={<HomePage />}></Route>
                    <Route path='/about' element={<About />}></Route>
                    <Route path='/mine' element={<Mine />}></Route> */}
                <Route index element={<Graphics />} />
                {/* 两种写法  index指定 或者path='' 指定默认展示页 */}
                {/*  or   <Route path='' element={<Graphics />} /> */}
                <Route path='/graph' element={LazyComponent(<Graph />)}></Route>
                <Route path='*' element={<Notfound />}></Route>
            </Route>

            <Route path='/actor' element={<Actor />}></Route>
            <Route path='/calendar' element={<Calendar />}>
                {/* <Route path='/calendar/:id' element={<Calendar />}></Route> */}
            </Route>

        </Routes>
        {/* </Suspense> */}
    </BrowserRouter>
)

export default router

// 路由拦截
// use element={<AuthComponent />}
// function AuthComponent({children}: any) {
//     const isAuth = localStorage.getItem('token')
//     return isAuth ?  children : <Redirect to='./'></Redirect>
// }